<template>
  <div id="childA">
    <div style="color:red"><slot name="red">xxx</slot></div>
    <div style="color:green"><slot name="green">xxx</slot></div>
    <h1>A组件</h1>
    <button @click="transform">向B发送信息</button>
    <p>因为你点了B，所以我的信息发生了变化：{{bMessage}}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      aMessage: 'Hello，B组件，我是A组件'
    }
  },
  computed: {
    bMessage () {
      return this.$store.state.bMessage
    }
  },
  methods: {
    transform () {
      this.$store.commit('transformB', { message: this.aMessage })
    }
  }
}
</script>
